<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-upload-img{
            max-width: 200px;
            margin-left: 110px;
        }
        .mask{
          display: none;
          position: fixed;
          left: 0;
          top:0;
          width: 100vw;
          height: 100vh;
          background: rgba(0,0,0,0.4);
          z-index: 100;
        }
        .sku-key{
          display: none;
          background-color: aliceblue;
          z-index: 101;
          width:400px;
          height:150px;
          display: block;
          position: absolute;
          left: 50%;
          top:50%;
          margin-top:-75px;
          margin-left:-200px;
        }
        .sku-key .layui-form-label {
          margin: 20px 0px;
        }
        .sku-key .layui-input-inline{
          margin: 20px 0px;
        }
        .sku-key .layui-form-item{
          
        }
        .sku-table{
          min-width: 600px;
          min-height: 100px;
        }
        .sku-table thead,tbody,tfoot,tr,th,td{
          padding:0px;
          margin: 0px;
        }
        .sku-table thead tr{
          border-bottom: 1px solid #000;
        }
        .sku-table thead th{
          width: 200px;
          height:30px;
          line-height: 30px;
        }
        .sku-table tbody tr{
          border-bottom: 1px solid #000;
        }
        .sku-table tbody tr td{
          width: 200px;
          text-decoration: 2em;
          font-size: 16px;
          color: #666;
          text-align: center;
        }
        .sku-table tbody tr td a{
          display: block;
          min-height: 50px;
          width: 100%; /* 宽度设置为100%，以填满父元素 */  
          height: 100%; /* 高度设置为100%，以填满父元素 */ 
        }
        .sku-table tbody tr td img{
            width: auto;
            max-height: 50px;
        }
        .sku-table tfoot{
          text-align: right;
        }
        .sku-key-title-list{
          width: 440px;
          margin-bottom: 20px;
        }
        .sku-key-title-list div{
          display: inline-block;
          padding: 10px 5px;
          margin-left: 10px;
          
        }
        .sku-key-title-list-key{
          border-bottom: 1px solid #000;
        }
        .sku-key-title-list-value div{

        }
        .sku-key-title-list-option{
          border-bottom: 1px solid #000;
        }
        .add-btn{
          float: right;
          background-color: #6adceb;
          color: #fff;
          font-size: 20px;
          text-align: center;
          height: 15px;
          line-height: 15px;
          border-radius: 15px;
          padding :15px
        }
        .add-btn:hover{
          font-size: 22px;
          background-color: #15ff00;
          color: #fff;
        }
        table caption{
          height: 35px;
          line-height: 35px;
          font-size: 22px;
        }
        .layui-input-inline span{
            display: block;
            padding: 9px 15px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
        }
        #keyword-tbody input{
            width: 100%;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            height: 40px;
            line-height: 40px;
            display: block;
            text-align: left;
            text-indent: 2em;
        }
        .layui-form-item .layui-input-inline {
            width: 260px;
        }
        .layui-form-item .label-block-input{
            display:inline-block;
            padding: 9px 15px;
            height: 20px;
            line-height: 20px;
        }
    </style>
  </head>
  
  <body>
    <div class="x-body">
        <div class="layui-form">
            <input type="text" id="id" name="id" value="{$info.id}" style="display: none;">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>订单号
                </label>
                <div class="layui-input-inline">
                    <span>
                        {$info.order_no}
                    </span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="mobile" class="layui-form-label">
                    <span class="x-red">*</span>联系电话
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="mobile" name="mobile" required lay-verify="required"
                    autocomplete="off" class="layui-input" value="{$info.mobile}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="mobile" class="layui-form-label">
                    <span class="x-red">*</span>联系人员
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="realname" name="realname" required lay-verify="required"
                    autocomplete="off" class="layui-input" value="{$info.realname}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="end_date" class="layui-form-label">
                    <span class="x-red">*</span>结束时间
                </label>
                <div class="layui-input-inline">
                    <input type="date" id="end_date" required lay-verify="required"
                    autocomplete="off" name="end_date" class="layui-input"  value="{$info.end_date|default=''}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="amount" class="layui-form-label">
                    <span class="x-red">*</span>价格
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="amount" name="amount" required lay-verify="required"
                        autocomplete="off" class="layui-input"  value="{$info.amount|default=''}">
                </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>价格类型
                </label>
                <div class="layui-input-inline">
                    <label for="price_type1" class="label-block-input">
                        <input type="radio" id="price_type1" name="price_type" value="1" {eq name="info.price_type" value="1"}checked{/eq}>
                        <strong>基础</strong>
                    </label>
                    <label for="price_type2" class="label-block-input">
                        <input type="radio" id="price_type2" name="price_type" value="2" {eq name="info.price_type" value="2"}checked{/eq}>
                        <strong>OCPC</strong>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>推广类型
                </label>
                <div class="layui-input-inline">
                    <label for="type1" class="label-block-input">
                        <input type="radio" id="type1" name="types" value="1" {eq name="info.type" value="1"}checked{/eq}>
                        <strong>全部</strong>
                    </label>
                    <label for="type2" class="label-block-input">
                        <input type="radio" id="type2" name="types" value="2" {eq name="info.type" value="2"}checked{/eq}>
                        <strong>PC端</strong>
                    </label>
                    <label for="type3" class="label-block-input">
                        <input type="radio" id="type3" name="types" value="3" {eq name="info.type" value="3"}checked{/eq}>
                        <strong>手机端</strong>
                    </label>
                </div>
            </div>
        </div>
          <!-- <div class="layui-form-item">
            <label for="classify_id" class="layui-form-label">
                <span class="x-red">*</span>状态
            </label>
            <div class="layui-input-inline">
                <select id="status" name="status">
                    
                </select>
            </div> -->
        <div  class="layui-form-item" style="width: 100%;">
            <table id="myTable" class="layui-table">  
                <caption>关键词列表</caption>
                <thead>
                    <tr>  
                        <th>关键词</th>  
                        <th>价格</th>
                        <th>类型</th>
                        <th>操作</th>  
                    </tr>  
                </thead>
                <tbody id="keyword-tbody">
                    {volist name="list" id="value"}
                        <tr id="row{$key}">
                            <td><input name="keyword" value="{$value.keyword}"></td> 
                            <td><input name="price" value="{$value.price}"></td>
                            <td>
                                <select name="type">
                                    <option value="1" {eq name="$info.type" value="1"}selected{/eq}>全部</option>
                                    <option value="2" {eq name="$info.type" value="2"}selected{/eq}>PC</option>
                                    <option value="3" {eq name="$info.type" value="3"}selected{/eq}>手机端</option>
                                </select>
                            </td>
                            <td><a href="javascript:javascript:hideRow({$key});">删除</a></td>
                        </tr>
                    {/volist}
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                    <a class="add-btn" href="javascript:addRow();">添加行</a>  
                    </td>
                </tr>
                </tfoot>
            </table>  
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                修改
            </button>
        </div>
    </div>
</div>
    <script>
      layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            name: function(value){
              if(value.length < 2){
                return '昵称至少得2个字符啊';
              }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
            let keywords = [],
                num = 1,
                number = 1,
                price_type = document.getElementsByName('price_type'),
                types = document.getElementsByName('types'),
                keyword = document.getElementsByName('keyword'),
                price = document.getElementsByName('price'),
                type = document.getElementsByName('type');
            types.forEach(function(value,key){
                if(value.checked == true)num = value.value;
            });
            price_type.forEach(function(value,key){
                if(value.checked == true)number = value.value;
            });
            keyword.forEach(function(value,key){
              keywords.push({
                keyword:value["value"],
                price:price[key].value,
                type:type[key].value
              });
            });
            data = {
                type:num,
                price_type:number,
                amount:document.getElementById('amount').value,
                mobile:document.getElementById('mobile').value,
                realname:document.getElementById('realname').value
            }
            let message = {
                data:data,
                keywords:keywords
            };
            console.log(message);
            //发异步，把数据提交给php
            $.ajax({
                url: '/admin/order/save?id={$info->id}', // 你的 PHP 脚本的 URL  
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                dataType: 'json', // 预期服务器返回的数据类型  
                data: message,
                success: function(res) { 
                    layer.alert("增加成功", {icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                }
            });
            return false;
          });
        });
        function addRow(){
          let tbody = document.getElementById('keyword-tbody'),
              trs = tbody.getElementsByTagName('tr'),
              string = '<td><input name="keyword"></td><td><input name="price"></td><td><select name="type"><option value="1">全部</option><option value="2">PC</option><option value="3">手机端</option></select></td>';
          tr = document.createElement('tr');
          tr.id = 'row' + (trs.length + 1);
          tr.innerHTML = string + '<td><a href="javascript:javascript:hideRow(' + (trs.length + 1) + ');">删除</a></td>';
          tbody.appendChild(tr);
        }
        function hideRow(id){
          let tr = document.getElementById('row' + id);
          tr.style = 'display:none';
          tr.innerHTML = '';
        }
        // document.addEventListener('DOMContentLoaded', function() {  
        //     // 获取所有的 price 输入元素  
        //     var priceInputs = document.getElementsByName('price');  
        //     // 获取 amount 输入元素  
        //     var amountInput = document.getElementById('amount');  
        //     // 为每个 price 输入添加 change 事件监听器  
        //     priceInputs.forEach(function(input) {  
        //         input.addEventListener('keyup', function() {  
        //             var sum = 0;  
        //             // 遍历所有的 price 输入并计算总和  
        //             priceInputs.forEach(function(priceInput) {  
        //                 // 确保输入的值是数字，如果不是，则忽略它或设置为0  
        //                 var value = parseFloat(priceInput.value) || 0;  
        //                 sum += value;  
        //             });  
        //             // 更新 amount 输入的 value  
        //             amountInput.value = sum.toFixed(2); // 根据需要格式化小数点位数  
        //         });  
        //     });
        // });
    </script>
  </body>
</html>